<%--
  Created by IntelliJ IDEA.
  User: yinshankun
  Date: 2020/10/30
  Time: 18:12尹山坤
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%String path = request.getContextPath();%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>注册</title>
    <link rel="stylesheet" type="text/css" href="<%=path%>/ysk/css/reset.css"/>
    <script type="text/javascript" src="<%=path%>/ysk/js/jquery-3.5.1.min.js"></script>

    <link rel="stylesheet" type="text/css" href="<%=path%>/ysk/css/thems.css">
<style type="text/css">
    .btn{
 margin-left:160px;
    }
    #sub{
        background-color: red;
    }
    #phonenum{
        width: 120px;
        height: 30px;
        float: left;
        margin-left: 400px;
        margin-top: -35px;


    }
    #time{
        float: left;
        width: 30px;
        height: 20px;
    display: none;
        margin-left: 405px;
        margin-top: -27px;

    }
    #ti{
        float: left;
        margin-top: -27px;
        margin-left: 420px;
        display: none;
    }

#login{
    margin-left: 550px;
    margin-top: -80px;
    font-size: 20px;
}
</style>
</head>
<body>
<!--当前位置-->

<div class="second">
    <div class="login">
        <div class="box_t"><em class="red">注册</em></div>
        <div class="reg">
            <div class="reg_bz"></div>
            <ul class="reg_m">
                <form action="<%=path%>/regist" id="myform" method="post" >
                    <li class="clearfix">
                        <span>用户名：</span>
                        <input name="username" id="username" type="text">
                        <span id="usercheck"></span>
                    </li>
                    <li class="clearfix">
                        <span>手机号：</span>
                        <input name="phonenum" id="phone" type="text">
                        <span id="ph"></span>
                    </li>

                    <li class="clearfix">
                        <span>密码：</span>
                        <input name="" id="userpass" type="password">
                        <span id="checkpass"></span>
                    </li>
                    <li class="clearfix">
                        <span>确认密码：</span>
                        <input name="userpass" id="userword" type="password">
                        <span id="checkword"></span>
                    </li>
                    <li class="clearfix yzm">
                        <span>验证码：</span>
                        <input name="" id="inputcode" placeholder="请输入验证码" type="text">
                       <img id="code" src="<%=path%>/code" alt=""/>
                     <a href="javascript:void(0)" id="yanzhengma"> 看不清</a>
                    </li>
                    <li class="clearfix">
                        <span>短信验证码：</span>
                        <input name="" placeholder="短信验证码" id="phonecode" type="text">
                       <input type="button" id="phonenum" value="获取短信验证码">

                       <div id="time">60</div> <div id="ti">秒后重新获取</div>
                    </li>
                    <li class="btn"><input id="sub" value="确定" type="submit"></li>
                </form>
                <li class="clearfix" id="login"><a href="<%=path%>/loginpager">登录</a></li>
            </ul>
        </div>
    </div>
</div>

</body>
</html>

<script type="text/javascript">

    $("#username").blur(checkusername);
    $("#phone").blur(checkphonenum);
    $("#userpass").blur(checkuserpass);
    $("#userword").blur(checkpassword);
    $("#inputcode").blur(checkInputCode);
    $("#phonecode").blur(checkphonecode);
    <!--检查用户名是否重复-->
    function checkusername() {


        var reg = /^\w{5,15}$/;
        var username = $("#username").val();

        var flag = false;
        if (reg.test(username)) {

            $("#usercheck").html("");

        } else {
            $("#usercheck").html("不符合规范");
            $("#usercheck").css("color", "red");
            $("#username").val("");
            $("#username").select();
            flag = false;
            return false;
        }

        $.ajax({
            url:"<%=path%>/checkusername",
            type: "post",
            async: false,
            data: {username:username},

            success: function (mes) {
                console.log("success...")
                console.log(mes=="no");

                if (mes == "ok") {

                    flag = true;
                    $("#usercheck").html("");
                }
                if (mes == "no") {
                    $("#usercheck").html("用户名重复");
                    $("#usercheck").css("color", "red");
                    flag = false;
                }
            }
        });

        return flag;

    }

   <!------------------------------------------------->

    <!--手机号格式是否正确以及号码是否被注册-->
    function checkphonenum() {
        var flag=false;
        var phonenum=$("#phone").val();
        var reg=/^[1][3,,5,7,8,9][0-9]{9}$/;
        if(reg.test(phonenum))
        {
            $.ajax({
                url:"<%=path%>/checkuserphone",
                async:false,
                method:"post",
                data:{phonenum:phonenum},
                success:function (mes) {
                    if(mes=="no")
                    {
                        $("#ph").html("")
                        flag=true;
                    }
                    else {
                        flag=false;
                        $("#phone").select();
                        $("#ph").html("该号码已经注册")
                        $("#phone").val("")
                    }
                }
            })

        }
        else {
            $("#ph").html("号码格式有误")
            $("#phone").val("");
            $("#phone").select();

        }


        return flag;


    }

    <!------------------------------------------------->
    <!--密码格式是否正确-->
    function checkuserpass() {


        var reg = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,15}$/;
        var password1 = $("#userpass").val();
        if (reg.test(password1)) {
            $("#checkpass").html("");
            return true;

        } else {
            $("#checkpass").html("×大小写字母及数字");
            $("#checkpass").css("color", "red");
            $("#userpass").val("");
            $("#userpass").select();

            return false;

        }


    }

    <!------------------------------------------------->
    <!--密码是否一致-->
    function checkpassword() {


        var userpass = $("#userpass").val();
        var userword = $("#userword").val();
        if (userpass == userword) {

            $("#checkword").html("");

            return true;

        } else {
            $("#checkword").html("两次密码不一致");
            $("#checkword").css("color", "red");
            $("#userword").val("");
            $("#userword").select();
            return false;
        }


    }

    <!------------------------------------------------->
    <!--检查验证码-->
    function checkInputCode()
    {
        var code =$("#inputcode").val();

        var flag =false;
        $.ajax({
            url:"<%=path%>/checkcode",
            type:"post",
            async:false,
            data:{code:code},
            success:function(mes){

                if(mes=="pass")
                {

                    flag = true;
                }
                if(mes=="not")
                {
                    $("#inputcode").val("");
                    $("#inputcode").attr("placeholder","验证码不正确");
                    $("#inputcode").select();
                    $("#code").attr("src","<%=path%>/code?rand="+Math.random());
                    flag = false;
                }

            }

        });

        return flag;

    }

    <!------------------------------------------------->
    <!--输入手机验证码是否正确-->
    function checkphonecode() {
            var flag=false;
        var phonenum=$("#phonecode").val();
        $.ajax({
            url:"<%=path%>/checkphonecode",
            async:false,
            method: "post",
            data:{phonenum:phonenum},
            success:function (mes) {
                if(mes=="yes")
                {
                    flag= true;
                }
                else {
                    $("#phonecode").val("");
                    $("#phonecode").attr("placeholder","验证码不正确");
                    $("#phonecode").select();

                    flag= false;
                }


            }
        })
        return flag;
    }





    <!--验证表单提交-->
    function check() {
        if(checkusername()==true&&checkphonenum()==true&&checkuserpass()==true&&checkpassword()==true&&checkInputCode()==true&&checkphonecode()==true)
        {
            return true;
        }
        else {
            return false;
        }

    }



<!--表单提交-->
    $("#myform").submit(check);





</script>
<script type="text/javascript">

    <!--手机号接受验证码-->

    $("#phonenum").click(function () {
        $("#phonenum").css("display","none")
        $("#time").css("display","block")
        $("#ti").css("display","block")

        var phone=$("#phone").val()
        var str = '0123456789';
        var code = '';
        for(i=0;i<6;i++){
            var n=parseInt(Math.random()*str.length)
            code+=str[n]
        }
        $.ajax({
            url:"<%=path%>/phonenum",
            async:false,
            data:{phone:phone,code:code},
            method:"post",
            success:function (mes) {

            }
        })


    })

<!---------------------------------->
    <!--计时-->
    $("#phonenum").click(jishi);
    function start() {

        var num=$("#time").html()
        num=num-1;

        $("#time").html(num);
        if(num==0)
        {
            clearInterval(t);
            $("#time").html(60);

            $("#time").css("display","none")
            $("#ti").css("display","none")
            $("#phonenum").css("display","block")
        }


    }
    var t;
    function jishi()
    {
        t = setInterval(start,1000);


    }
    <!--计时结束-->
    <!------------------->
    <!------------------->
    <!--更换验证码-->
    $("#yanzhengma").click(function () {
        $("#code").attr("src","<%=path%>/code?rand="+Math.random());


    })
    <!------------------->



</script>